<template>
  <div class="cumtom">
    <div class="cumtom-list" v-if="value">
      <div class="list-name" :class="value==1?`dui`:value==2?`cuo`:`zhong`">{{ value | fiterValue(options) }}</div>
    </div>
    <el-select v-model="value" placeholder="请选择" clearable @change="getValue">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <div class="optionBig">
          <div class="name" :class="item.value==1?`dui`:item.value==2?`cuo`:`zhong`">{{ item.label }}</div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "WeChat",
  props: {
    options: {

      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value: null,
    }
  },
  filters: {
    fiterValue(val, list) {
      let name = '';
      list.forEach(item => {
        if (item.value == val) {
          name = item.label;
        }
      });
      return name;
    },
    getWeChatName(val, list) {
      let name = '';
      list.forEach(item => {
        if (item.value == val) {
          name = item.WeChatName;
        }
      });
      return name;
    }
  },
  methods: {
    getValue(e) {
      console.log('e的值', e);
      let obj = {}
      this.options.forEach((item) => {
        if (item.value == e) {
          obj = item;
        }
      });
      this.$emit('getValue', obj);
    }
  },
}
</script>

<style scoped lang="scss">
.cumtom {
  position: relative;
  width: 100%;
  z-index: 2;
  //.el-select{
  //  position: absolute;
  //  top: 0px;
  //  height: 32px;
  //  z-index: 2;
  //}
  .cumtom-list {
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 32px;
    bottom: 0px;
    display: flex;
    padding: 0px 10px;
    box-sizing: border-box;

  }
}

.optionBig {
  display: flex;

  .unit {
    color: rgb(240, 139, 0);
  }
}

.list-unit {
  color: rgb(240, 139, 0);
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-select > .el-input {
  font-size: 0px;

}

::v-deep .el-input--small .el-input__inner {
  background: none !important;
}

  .dui {
    color: #00c270;
  }
  .cuo {
    color: #C03639;
  }
  .zhong {
    color: #efbb78;
  }

</style>
